<!--  -->
<template>
  <div class="pub">
    <header class="pub_head">
      <nav class="pub_head_nav clearfix">
        <h1 class="fl">
          <nuxt-link to="/">
            <img
              src="~static/img/logo@2x.1ffffc92ac7d7386e7c9a312.png"
              alt="网易云音乐"
            />
          </nuxt-link>
        </h1>
        <ul class="fl">
          <n-link to="/home" tag="li" active-class="nav_active">
            发现音乐
          </n-link>
          <n-link to="/my" tag="li" active-class="nav_active" no-prefetch>
            我的音乐
          </n-link>
          <n-link to="" tag="li" no-prefetch>朋友</n-link>
        </ul>
        <div class="right_box fr">
          <a-input-search
            placeholder="音乐/视频/电台/用户"
            style="width: 200px"
            type="search"
            @search="onSearch"
          />
          <a-button
            v-if="!userinfo.avatarUrl"
            type="link"
            size="large"
            @click="login_box = true"
          >
            登录
          </a-button>
          <a-avatar
            v-else
            :size="30"
            :src="userinfo.avatarUrl"
            class="avater"
          />
          <login-box :loging-modal="login_box" @changeShow="changeShow" />
        </div>
      </nav>
    </header>
    <div class="home">
      <div class="inNav">
        <nav v-show="showNav" class="inNav_nav">
          <ul>
            <n-link
              to="/"
              tag="li"
              :active-class="$route.path === '/home' ? 'active' : ''"
            >
              推荐</n-link
            >
            <n-link
              :to="{ name: 'index-home-toplist' }"
              tag="li"
              no-prefetch
              active-class="active"
              >排行榜</n-link
            >
            <n-link
              tag="li"
              to="/home/playlist"
              no-prefetch
              active-class="active"
            >
              歌单 <a-icon type="trademark"
            /></n-link>
            <n-link
              tag="li"
              to="/home/djradio"
              no-prefetch
              active-class="active"
            >
              主播电台
            </n-link>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import LoginBox from '@/components/login'
export default {
  name: 'Headers',
  components: {
    LoginBox
  },
  data() {
    return {
      navShow: true,
      login_box: false
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.userinfo.profile
    },
    showNav() {
      return this.$store.state.showNav
    }
  },
  methods: {
    onSearch(val) {},
    changeShow(val) {
      this.login_box = val
    }
  }
}
</script>

<style lang="scss" scoped>
.avater {
  vertical-align: middle;
  margin-left: 20px;
}
.pub {
  width: 100%;
  &_head {
    background-color: #242424;
    position: relative;
    height: 70px;
    &_nav {
      width: 1120px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
      /deep/ .right_box {
        margin-left: 20px;
        .ant-input-search {
          width: 160px !important;
          .ant-input {
            font-size: 12px;
            height: 28px;
            border-radius: 20px;
          }
        }
        .ant-btn {
          color: #787878;
          font-size: 12px;
        }
        :hover {
          color: #999;
        }
      }
      h1 {
        width: 184px;
        height: 70px;
        padding: 22px 16px 0;
        img {
          width: 100%;
        }
      }
      .nav_active {
        color: #fff;
        background-color: #000;
        position: relative;
        z-index: 0;
      }
      .nav_active::after {
        @include triangle(top, 8px, #c20c0c);
        position: absolute;
        content: '';
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
      }

      ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        justify-items: center;
        color: #ccc;
        height: 70px;
        li {
          height: 100%;
          line-height: 70px;
          padding: 0 18px;
        }
      }
    }
  }
  &_head::before {
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #c20c0c;
    bottom: -6px;
    left: 0;
    content: '';
  }
  .home {
    color: #333;
    .inNav {
      background: #c20c0c;
      padding-bottom: 6px;
      &_nav {
        height: 30px;
        width: 742px;
        margin: 0 auto;
        ul {
          display: flex;
          justify-content: flex-start;
          justify-items: center;
          li {
            line-height: 20px;
            margin: 6px 18px;
            padding: 1px 12px;
            cursor: pointer;
            color: #fff;
            font-size: 12px;
            border-radius: 12px;
            cursor: pointer;
            .anticon-trademark {
              font-size: 10px;
            }
          }
          :hover {
            background: #9b0909;
          }
          .active {
            background: #9b0909;
          }
        }
      }
    }
  }
}
</style>
